<template>
    <section class="friend-item">
      <div class="inner">
          <div class="thumbs">
              <img :src="data.img" alt="thumbs">
          </div>
          <div class="details">
              <div class="float-left">
                  <p class="name">
                      {{data.name}}
                      <img src="../../assets/img/2.1.png" alt="">
                  </p>
                  <p class="tips">
                      <span class="pink">
                           <Icon type="ios-navigate" />
                      </span>
                      {{data.location}}
                  </p>
              </div>
          </div>
      </div>
    </section>
</template>

<script>
export default {
  name: 'UserSimple',
    props: {
        data: {
            type: Object,
            required: true
        }
    }
}
</script>

<style scoped lang="less">
  @import "../../style/style.less";
  .inner {
      padding: 10px 10px 12px 0;
    &:after {
        display: block;
        clear: both;
        content: "";
        visibility: hidden;
        height: 0;
    }
      .thumbs, .details {
          float: left;
      }
      .thumbs {
          width: 65px;
          height: 65px;
          line-height: 1;
          font-size: 0;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 10px;
          img {
              width: 100%;
              height: 100%;
          }
      }
      .details {
          width: calc(~'100% - 75px');
          &:after{
              display: block;
              clear: both;
              content: "";
              visibility: hidden;
              height: 0;
          }
          .name {
              color: @theme-color-dark;
              font-size: 14px;
              height: 20px;
              line-height: 20px;
              margin-top: 10px;
              margin-bottom: 10px;
              img {
                  width: 20px;
                  height: 20px;
                  display: inline-block;
                  vertical-align: middle;
              }
          }
          .tips{
              color: #999;
              font-size: 14px;
          }
      }
  }
</style>
